<template>
  <div class="setting">
    <div class="setting-left">
      <div class="setting-left-header">
        <div class="setting-left-search">
          <i class="el-icon-search" style="color: #628196;font-weight: bold"></i>
          <el-input :placeholder="$t('Search')" v-model="searchParams.inputValue"></el-input>
        </div>
        <el-button type="primary" icon="el-icon-plus" @click="handleOpenAddCabinetDialog">
          {{ $t('Add cabinet') }}
        </el-button>
      </div>
      <div class="setting-left-body">
        <el-table :data="cabinetShowList">
          <el-table-column
              width="50"
              prop="index"
              show-overflow-tooltip
              :label="$t('id')">
            <template slot-scope="scope">
              <div class="cabinet-id">
                <img v-if="scope.row.indexValue === 'all'" class="svg-icon height_24px" src="@/assets/diamond.svg" alt="">
                <span v-else>{{ scope.row.indexValue }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              show-overflow-tooltip
              :label="$t('AllCabinets')">
            <template slot-scope="scope">
              <div class="cabinet-name" @click="handleEditCabinet(scope.row)">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="totalProfiles"
              show-overflow-tooltip
              :label="$t('totalProfiles')">
            <template slot-scope="scope">
              <div class="totalProfiles" @click="handleEditCabinetProfile(scope.row)">
                {{ scope.row.totalProfiles }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              show-overflow-tooltip
              :label="$t('totalUsers')">
            <template slot-scope="scope">
              <div class="totalProfiles" @click="handleEditCabinetUser(scope.row)">
                {{ scope.row.totalUsers }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="setting-right">
      <div class="setting-right-header">
        <div class="setting-right-search">
          <i class="el-icon-search" style="color: #628196;font-weight: bold"></i>
          <el-input :placeholder="$t('Search')" v-model="searchParams.inputValue2"></el-input>
        </div>
        <div style="margin-left: auto">
          <el-button type="primary" icon="el-icon-plus" @click="handleOpenAddUserDialog">
            {{ $t('Add User') }}
          </el-button>
          <el-button type="primary" @click="handleOpenAddManageSchedulerDialog">
            {{ $t('Manage Scheduler') }}
          </el-button>
        </div>
      </div>
      <div>
        <el-table
            :data="userShowList"
            tooltip-effect="dark"
            @cell-click="handleUserCellClick"
            style="width: 100%">
          <el-table-column
              type="index"
              label="No"
              width="55">
          </el-table-column>
          <el-table-column
              prop="position"
              :label="$t('Position')">
          </el-table-column>
          <el-table-column
              prop="name"
              :label="$t('Name')">
          </el-table-column>
          <el-table-column
              prop="email"
              show-overflow-tooltip
              :label="$t('Email')">
          </el-table-column>
          <el-table-column
              width="300px"
              :label="$t('Cabinets')">
            <template slot-scope="scope">
              <div class="user-cabinets-list">
                <div v-for="(cabinetId,cabinetIndex) in scope.row.cabinets" :key="cabinetId" class="user-cabinets-item">
                  <el-select placeholder="" :value="scope.row.cabinets[cabinetIndex]" clearable @change="(val) => handleChangeCabinet(val,scope.row.cabinets[cabinetIndex],cabinetIndex, scope.row)" @clear="() => handleClearCabinet('',scope.row.cabinets[cabinetIndex],cabinetIndex,scope.row)">
                    <el-option
                        v-for="item in filterCabinetsList(scope.row.cabinets, cabinetId)"
                        :key="item.id"
                        :label="item.indexValue"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('All Work Shifts')">
            <template slot="header" slot-scope="scope">
              <el-select v-model="searchParams.workShift">
                <el-option
                    v-for="item in workShiftList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </template>
            <template slot-scope="scope">
              <el-select v-model="scope.row.workShiftId" @change="() => handleUpdateWorkShift(scope.row)">
                <el-option
                    v-for="item in workShiftList2"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
        top="30vh"
        :visible.sync="addCabinetDialog"
        width="42rem">
      <div class="cabinet-dialog">
        <div class="cabinet-form">
          <div class="cabinet-form-header">
            <div class="cabinet-form-label">
              {{ cabinetForm.id ? $t('Edit Cabinet') : $t('Create Cabinet') }}
            </div>
            <div class="required" v-show="cabinetRequiredShow">
              {{ $t('Input is required!') }}
            </div>
          </div>
          <div class="cabinet-form-input">
            <el-input v-model="cabinetForm.name"></el-input>
          </div>
        </div>
        <div class="cabinet-bottom">
          <el-button v-show="cabinetForm.id" type="primary" @click="handleDeleteCabinet">
            {{ $t('Delete') }}
          </el-button>
          <el-button v-show="!cabinetForm.id" type="primary" @click="addCabinetDialog = false">
            {{ $t('Cancel') }}
          </el-button>
          <el-button type="primary" @click="handleSaveCabinet">
            {{ $t('Save') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        top="7vh"
        :visible.sync="addUserDialog"
        :close-on-click-modal="false"
        width="52vw">
      <div class="adduser-dialog">
        <div class="header large">
          <div class="label">{{$t('User Settings')}}</div>
          <div class="divider"></div>
<!--      el-select 下拉   -->
          <el-select v-model="userForm.position">
            <el-option
                v-for="item in positionList"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="userinfo">
          <el-form inline>
            <el-form-item>
              <el-input class="dark_input2" :placeholder="$t('Name')" v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input class="dark_input2" :placeholder="$t('Mail')" v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input class="dark_input2" :placeholder="$t('Password')" v-model="userForm.password"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="header">
          <div class="label">{{$t('Reference Code')}}</div>
          <div class="divider"></div>
        </div>
        <div class="reference-code-list">
          <div class="menu-item" v-for="item in platformList" :key="item.id">
            <div class="menu-item-left">
              <div class="menu-name">{{ item.name }}</div>
            </div>
            <el-input class="dark_input2" v-model="item.code"></el-input>
          </div>
        </div>
        <div class="header">
          <div class="label">{{$t('Rights')}}</div>
          <div class="divider"></div>
        </div>
        <div class="menu-wrapper">
          <div class="menu-list">
            <div class="menu-item">
              <div class="menu-item-left">
                <div class="menu-name">Operator</div>
              </div>
              <el-switch
                  size="small" class="switch" v-model="operatorChecked"></el-switch>
            </div>
            <div class="menu-item" v-for="item in menuList1" :key="item.id">
              <div class="menu-item-left">
                <img class="svg-icon height_40px" :src="item.icon"></img>
                <div class="menu-name">{{ item.name }}</div>
              </div>
              <el-switch size="small" class="switch" v-model="item.checked"></el-switch>
            </div>
          </div>
          <div class="menu-list">
            <div class="menu-item">
              <div class="menu-item-left">
                <div class="menu-name">Manager</div>
              </div>
              <el-switch size="small" class="switch" v-model="managerChecked"></el-switch>
            </div>
            <div class="menu-item" v-for="item in menuList2" :key="item.id">
              <div class="menu-item-left">
                <img class="svg-icon height_40px" :src="item.icon"></img>
                <div class="menu-name">{{ item.name }}</div>
              </div>
              <el-switch size="small" class="switch" v-model="item.checked"></el-switch>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <el-button v-if="userForm.id" type="primary" @click="handleDeleteUser">{{ $t("Delete User")}}</el-button>
        <div v-else></div>
        <el-button type="primary" :disabled="userBtnDisabled" @click="handleSaveUser">{{ $t("Save User")}}</el-button>
      </div>
    </el-dialog>
    <el-dialog
        top="10vh"
        class="delete-user-dialog"
        :visible.sync="deleteUserDialog"
        :close-on-click-modal="false"
        width="52vw">
      <div class="delete-user-box">
        <div class="delete-user-title">
          {{ userForm.dependentUsers && userForm.dependentUsers.length ? $t("DeleteUserTips2") : $t("DeleteUserTips")}}
        </div>
        <div class="delete-btn-box">
          <div @click="handleCancelUser">
            {{ $t("No")}}
          </div>
          <div @click="handleMoveUser">
            {{ $t("Move to me")}}
          </div>
          <div @click="handleConfirmDeleteUser">
            {{ $t("Yes")}}
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        top="10vh"
        :visible.sync="addManageSchedulerDialog"
        width="60%">
      <div class="manage-dialog">
        <div class="manage-dialog-left">
          <div class="manage-dialog-name">
            {{ $t('Manage Scheduler')}}
          </div>
          <div>
            <el-form ref="platformFormRef" :model="managerForm" :rules="managerRules">
              <el-form-item label="" prop="name">
                <el-input :placeholder="$t('Work Shift Name')" class="dark_input2" v-model="managerForm.name"></el-input>
              </el-form-item>
              <el-form-item label="" prop="zoneId">
                <el-select
                    :placeholder="$t('Set timezone')"
                    v-model="managerForm.zoneId">
                  <el-option
                      v-for="item in timeZoneOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" icon="el-icon-plus" @click="handleAddTimeItem"></el-button>
              </el-form-item>
              <el-form-item label="">
                <div class="ontervals-input-item" v-for="(item,index) in managerForm.onlineIntervals" :key="index">
                  <el-time-picker
                      class="dark_input2"
                      arrow-control
                      v-model="item.startTime"
                      value-format="HH:mm"
                      :picker-options="{
                        format: 'HH:mm',
                      }"
                      :placeholder="$t('Work Hour Start')">
                  </el-time-picker>
                  <el-time-picker
                      class="dark_input2"
                      arrow-control
                      v-model="item.endTime"
                      value-format="HH:mm"
                      :picker-options="{
                        format: 'HH:mm',
                      }"
                      :placeholder="$t('Work Hour End')">
                  </el-time-picker>
                  <el-button type="primary" icon="el-icon-delete"></el-button>
                </div>
              </el-form-item>
            </el-form>
            <div style="display: flex;align-items: center">
              <el-button type="primary" @click="handleSaveManager">{{ $t("Save Work Shift")}}</el-button>
              <el-button type="primary" v-show="managerForm.id" @click="handleCancelManager">{{ $t("Cancel Edit")}}</el-button>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="manage-dialog-right">
          <div class="manage-dialog-name">
            {{ $t('Scheduler List')}}
          </div>
          <div class="platform-list">
            <!--     遍历平台列表，支持选中，选中后样式发生变化，选中包括编辑和删除两个按钮       -->
            <div :class="['platform-item', managerForm.id === item.id ? 'active' : '']" v-for="item in managerList" :key="item.id">
                <div class="platform-top">
                  <div class="platform-item-name">{{ item.name }}</div>
                  <div class="platform-item-btn">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleSelectManager(item)"></el-button>
                    <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleDeleteManager(item)"></el-button>
                  </div>
                </div>
                <div class="intervals-list">
                  <el-button type="primary" v-for="intervalsItem in (item.onlineIntervals || [])" :key="intervalsItem.id">
                    {{ intervalsItem.startTime }} - {{ intervalsItem.endTime }}
                  </el-button>
                </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'setting',
  components: {
  },
  data() {
    return {
      searchParams: {
        inputValue: '',
        inputValue2: '',
        workShift: 'all'
      },
      cabinetList: [],
      addCabinetDialog: false,
      cabinetForm: {
        id: undefined,
        name: '',
      },
      cabinetRequiredShow: false,
      // 用户
      userList: [],
      workShiftList: [],
      workShiftList2: [],
      addUserDialog: false,
      userForm: {
        id: undefined,
        name: '',
        position: "OPERATOR"
      },
      positionList: ['OPERATOR', 'MANAGER'],
      menuList1: [
        {
          id: 'CORRESPONDENCE',
          icon: require('@/assets/correspondence.svg'),
          name: 'Chat&Mail',
          checked: false
        },
        {
          id: 'UPLOAD_MEDIA',
          icon: require('@/assets/settings.svg'),
          name: 'Upload media',
          checked: false
        },
      ],
      menuList2: [
        {
          id: 'SENDER',
          icon: require('@/assets/sender.svg'),
          name: 'Sender',
          checked: false
        },
        {
          id: 'ICEBREAKERS',
          icon: require('@/assets/icebreakers.svg'),
          name: 'iceBreakers',
          checked: false
        },
        {
          id: 'SETTINGS',
          icon: require('@/assets/settings.svg'),
          name: 'Settings',
          checked: false
        },
        {
          id: 'PROFILES',
          icon: require('@/assets/profiles.svg'),
          name: 'Manage profiles',
          checked: false
        },
        {
          id: 'FREE_PROFILES',
          icon: require('@/assets/profiles.svg'),
          name: 'Manage free profiles',
          checked: false
        },
        {
          id: 'WALLET',
          icon: require('@/assets/wallet.svg'),
          name: 'Wallet',
          checked: false
        },
        {
          id: 'NEWS_FEED',
          icon: require('@/assets/news-feed.svg'),
          name: 'News feed',
          checked: false
        }
      ],
      platformList: [],
      operatorChecked: false,
      managerChecked: false,
      deleteUserDialog: false,
      // 管理排期
      addManageSchedulerDialog: false,
      managerForm: {
        id: undefined,
        name: '',
        zoneId: '',
        onlineIntervals: [
        ]
      },
      managerRules: {
        name: [
          { required: true, message: this.$t('Input is required!'), trigger: 'blur' },
        ],
        zoneId: [
          { required: true, message: this.$t('Select is required!'), trigger: 'blur' },
        ],
      },
      timeZoneOptions: [
        {
          id: 'Asia/Shanghai',
          name: 'Asia/Shanghai'
        }
      ],
      managerList: [
      ]
    };
  },
  computed: {
    cabinetShowList() {
      // 搜索名称包含的柜子列表
      return [
        {
          id: 'All',
          indexValue: 'all',
          name: this.$t('AllCabinets'),
          totalProfiles: 1,
          totalUsers: 1,
        },
        ...this.cabinetList.filter(item => item.name.includes(this.searchParams.inputValue))
      ]
    },
    userShowList() {
      // 搜索名称包含的用户列表以及根据workShift过滤
      const filterList =  this.userList.filter(item => item.name.includes(this.searchParams.inputValue2))
      if (this.searchParams.workShift === 'all') {
        return filterList
      } else {
        return filterList.filter(item => item.workShiftId === this.searchParams.workShift)
      }
    },
    userBtnDisabled() {
      return !this.userForm.name || !this.userForm.email || !this.userForm.password
    }
  },
  mounted() {
    this.getCabinetList()
    this.getPlatformList()
    this.getUserList()
    this.getWorkShiftList()
  },
  watch: {
    // 监听柜子名称，如果输入为空，显示必填提示，否则隐藏，如果关闭弹窗则隐藏提示
    'cabinetForm.name'(val) {
      if (!val) {
        this.cabinetRequiredShow = true
      } else {
        this.cabinetRequiredShow = false
      }
    },
    // 监听菜单列表改变全选状态
    menuList1: {
      handler(val) {
        this.operatorChecked = val.every(item => item.checked)
      },
      deep: true
    },
    menuList2: {
      handler(val) {
        this.managerChecked = val.every(item => item.checked)
      },
      deep: true
    },
    // 监听全选状态改变菜单列表
    operatorChecked(val) {
      // 如果是全选，且有一个未选中，则取消全选
      if (!val) {
        // 如果是取消全选，且有一个选中，则全选
        if (!this.menuList1.every(item => item.checked)) {
          return
        }
      }
      this.menuList1.forEach(item => {
        item.checked = val
      })
    },
    managerChecked(val) {
      // 如果是全选，且有一个未选中，则取消全选
      if (!val) {
        // 如果是取消全选，且有一个选中，则全选
        if (!this.menuList2.every(item => item.checked)) {
          return
        }
      }
      this.menuList2.forEach(item => {
        item.checked = val
      })
    }
  },
  methods: {
    // 获取平台
    getPlatformList() {
      this.$http.getPlatformList().then(res => {
        this.platformList = res.map(el => {
          return {
            ...el,
            code: ''
          }
        })
      })
    },
    // 打开新增柜子弹窗
    handleOpenAddCabinetDialog() {
      this.addCabinetDialog = true
      this.cabinetForm = {
        id: undefined,
        name: '',
      }
    },
    // 获取柜子
    getCabinetList() {
      this.$http.getCabinetList({
        ids: []
      }).then(res => {
        this.cabinetList = [
            ...(res.sort((a, b) => a.index - b.index).map(item => {
              return {
                ...item,
                indexValue: 'C' + item.index,
              }
            }))
        ]
      })
    },
    // 编辑柜子
    handleEditCabinet(row) {
      if (row.id === 'All') return
      this.cabinetForm = {
        id: row.id,
        name: row.name,
      }
      this.addCabinetDialog = true
    },
    // 保存柜子
    handleSaveCabinet() {
      if (!this.cabinetForm.name) {
        this.cabinetRequiredShow = true
        return
      }
      if (this.cabinetForm.id) {
        // 编辑柜子
        this.$http.updateCabinet({
          info: {
            id: this.cabinetForm.id,
            name: this.cabinetForm.name,
          }
        }).then(res => {
          this.getCabinetList()
          this.addCabinetDialog = false
          this.$message({
            message: this.$t('Success'),
            type: 'success'
          })
        })

      } else {
        // 新增柜子
        this.$http.addCabinet({
          name: this.cabinetForm.name,
        }).then(res => {
          this.getCabinetList()
          this.addCabinetDialog = false
          this.$message({
            message: this.$t('Success'),
            type: 'success'
          })
        })
      }
    },
    // 删除柜子
    handleDeleteCabinet() {
      this.$confirm(this.$t('confirmDelete'), '', {
        confirmButtonText: this.$t('Yes'),
        cancelButtonText: this.$t('No'),
        // type: 'warning'
      }).then(() => {
        this.$http.deleteCabinet({
          info: {
            id: this.cabinetForm.id,
          }
        }).then(res => {
          this.getCabinetList()
          this.addCabinetDialog = false
          this.$message({
            message: this.$t('Success'),
            type: 'success'
          })
        }).catch(() => {
        });
      })

    },
    // 编辑柜子档案
    handleEditCabinetProfile(row) {
      if (row.id === 'All') return
      this.$router.push({
        path: '/profiles',
      })
    },
    // 编辑柜子用户
    handleEditCabinetUser(row) {
      if (row.id === 'All') return
    },
    /**
     * 用户
     */
    getUserList() {
      this.$http.getUserList({
      }).then(res => {
        this.userList = res.map(el => {
          let cabinets = el.cabinets.map(c => c.id)
          if (cabinets.length < 5) {
            cabinets.push('')
          }
          return {
            ...el,
            cabinets
          }
        })
      })
    },
    handleUserCellClick(row, column, cell, event) {
      console.log(row, column, cell, event)
      if (column.property === "position" || column.property === "name"|| column.property === "email") {

        this.menuList1.forEach(menu => {
          menu.checked = !!row.permissions.find(id => id == menu.id)
        })
        this.menuList2.forEach(menu => {
          menu.checked = !!row.permissions.find(id => id == menu.id)
        })
        this.platformList.forEach(item => {
          if (row.refCode[item.name]) {
            item.code = row.refCode[item.id]
          } else {
            item.code = ''
          }
        })
        this.userForm = {
          ...row
        }
        this.addUserDialog = true

      }
    },
    handleOpenAddUserDialog() {
      this.addUserDialog = true
      this.userForm = {
        id: undefined,
        name: '',
        position: "OPERATOR",
        email: '',
        password: '',
      }
      this.menuList1.forEach(menu => {
        menu.checked = false
      })
      this.menuList2.forEach(menu => {
        menu.checked = false
      })
      this.platformList.forEach(item => {
        item.code = ''
      })
    },
    // 保存用户
    handleSaveUser() {
      let refCode = {}
      this.platformList.forEach(item => {
        if (item.name && item.code) {
          refCode[item.name] = item.code
        }
      })
      let permissions = [
        ...this.menuList1,
        ...this.menuList2,
      ].filter(item => item.checked).map(item => item.id)
      if (this.userForm.id) {
        // 编辑用户
        this.$http.updateUser({
          id: this.userForm.id,
          info: {
            name: this.userForm.name,
            position: this.userForm.position,
            email: this.userForm.email,
            password: this.userForm.password,
            refCode,
            permissions
          }
        }).then(res => {
          this.getUserList()
          this.addUserDialog = false
          this.$message({
            message: this.$t('Success'),
            type: 'success'
          })
        })

      } else {
        // 新增用户
        this.$http.addUser({
          info: {
            name: this.userForm.name,
            position: this.userForm.position,
            email: this.userForm.email,
            password: this.userForm.password,
            refCode,
            permissions
          }
        }).then(res => {
          this.getUserList()
          this.addUserDialog = false
          this.$message({
            message: this.$t('Success'),
            type: 'success'
          })
        })
      }
    },
    // 删除用户
    handleDeleteUser() {
      this.deleteUserDialog = true
    },
    // 确认删除用户
    handleConfirmDeleteUser() {
      this.$http.deleteUser({
        info: {
          userId: this.userForm.id,
          deleteAllDuplicates: !!this.userForm.dependentUsers && this.userForm.dependentUsers.length
        }
      }).then(res => {
        this.getUserList()
        this.addUserDialog = false
        this.deleteUserDialog = false
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
      }).catch(() => {
      });
    },
    // 取消用户
    handleCancelUser() {
      this.deleteUserDialog = false
    },
    // 移动用户
    handleMoveUser() {

    },
    /**
     * 用户柜子
     */
    filterCabinetsList(cabinets, cabinetId) {
      // 过滤掉已经选择的柜子
      return this.cabinetList.filter(item => {
        return !cabinets.find(id => item.id === id && item.id !== cabinetId)
      })
    },
    handleChangeCabinet(val,oldVal,index, row) {
      if (!val) return
      console.log('change')
      // 选择柜子
      this.$http.updateUserCabinet({
        info: {
          id: row.id,
          cabinetsToAdd: [val].filter(id => id),
          cabinetsToDelete: [oldVal].filter(id => id)
        }
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        row.cabinets[index] = val
        row.cabinets = row.cabinets.filter(id => id)
        if (row.cabinets.length < 5) {
          row.cabinets.push('')
        }
      }).finally(() => {
        // this.getUserList()
      })
    },
    handleClearCabinet(val,oldVal,index,row) {
      console.log('clear')
      // 选择柜子
      this.$http.updateUserCabinet({
        info: {
          id: row.id,
          cabinetsToDelete: [val].filter(id => id),
          cabinetsToAdd: [oldVal].filter(id => id)
        }
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        row.cabinets[index] = ''
        row.cabinets = row.cabinets.filter(id => id)
        if (row.cabinets.length < 5) {
          row.cabinets.push('')
        }
      }).finally(() => {
        // this.getUserList()
      })
    },
    /**
     * 用户排期
     */
    // 获取排期
    getWorkShiftList() {
      this.$http.getWorkShiftList({
      }).then(res => {
        this.workShiftList = [
          {
            id: 'all',
            name: this.$t('All Work Shifts'),
          },
          {
            id: 'none',
            name: this.$t('NotInWork'),
          },
          ...res,
        ]
        this.workShiftList2 = [
          {
            id: 'none',
            name: this.$t('NotInWork'),
          },
          ...res,
        ]
        this.managerList = [
            ...res
        ]
      })
    },
    // 切换工作时间
    handleUpdateWorkShift(row) {
      this.$http.updateUserWorkShift({
        info: {
          user_id: row.id,
          shift_id: row.workShiftId === 'none' ? '' : row.workShiftId,
        }
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
      }).finally(() => {
        this.getUserList()
      })
    },
    handleOpenAddManageSchedulerDialog() {
      this.addManageSchedulerDialog = true
      this.managerForm = {
        id: undefined,
        name: '',
        zoneId: '',
        onlineIntervals: [
        ]
      }
    },
    handleAddTimeItem() {
      this.managerForm.onlineIntervals.push({
        startTime: '',
        endTime: ''
      })
    },
    // 选中平台, 填充表单数据
    handleSelectManager(item) {
      this.managerForm = {
        ...item,
        onlineIntervals: [
            ...(item.onlineIntervals || [])
        ]
      }
    },
    // 保存平台 区分新增和编辑
    handleSaveManager() {
      this.$refs.platformFormRef.validate(valid => {
        if (valid) {
          this.$http[this.managerForm.id ? 'updateWorkShift' : 'addWorkShift']({
            info: this.managerForm
          }).then(res => {
            this.$message({
              message: this.$t('Success'),
              type: 'success'
            })
            this.addManageSchedulerDialog = false
            this.getWorkShiftList()
          })
        }
      })
    },
    // 取消编辑平台
    handleCancelManager() {
      this.managerForm = {
        id: undefined,
        name: '',
        zoneId: '',
        onlineIntervals: [
        ]
      }
    },
    // 删除平台
    handleDeleteManager(item) {
      this.$http.deleteWorkShift({
        id: item.id
      }).then(res => {
        this.$message({
          message: this.$t('Success'),
          type: 'success'
        })
        this.getWorkShiftList()
      })
    },
  }
}
</script>
<style lang="scss">
.setting {
  display: grid;
  grid-template-columns: min(calc(471 / 14 * 1rem),24.53125vw) auto;
  height: calc(100vh - min(4rem,2.917vw));
  padding: min(calc(8 / 14 * 1rem),calc(8 / (1920 / 100) * 1vw)) 0 min(0rem,0vw);
  overflow: hidden;
  font-family: Inter,sans-serif;
  column-gap: min(calc(10 / 14 * 1rem),calc(10 / (1920 / 100) * 1vw));
  .manage-dialog {
    height: 70vh;
    display: flex;
    gap: 3%;
    width: 100%;
    padding: 2%;
    border-radius: 1.143rem;
    background-color: #0e222e;
    .ontervals-input-item {
      display: flex;
      gap: 1.143rem;
      align-items: center;
      margin-bottom: 10px;
      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: initial;
      }
      .el-time-picker {
        width: 30%;
      }
    }
    .manage-dialog-name {
      font-size: 1.714rem;
      font-weight: 700;
      letter-spacing: .01em;
    }
    .manage-dialog-left {
      flex: 1 0 40%;
      display: flex;
      flex-direction: column;
      gap: 5%;
      overflow: auto;
    }
    .line {
      align-self: flex-end;
      height: calc(100% - 3.857rem);
      border: 1px solid #2F677E;
    }
    .manage-dialog-right {
      flex: 1 0 56%;
      display: flex;
      flex-direction: column;
      gap: 5%;
      .platform-list {
        display: flex;
        flex-direction: column;
        gap: 0.571rem;
        width: 100%;
        height: 100%;
        overflow: auto;
        .platform-item {
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          gap: 1.714rem;
          width: 95%;
          padding: 1.286rem 1.429rem;
          border: 1px solid #67CAE8;
          border-radius: 1.143rem;
          background-color: #112939;
          &.active {
            background-color: #1d4560;
          }
          .platform-item-name {
            width: 60%;
          }
          .platform-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .intervals-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
          }
        }
      }
    }
  }
  
  
  .adduser-dialog {
    display: flex;
    flex: 1 0 80%;
    flex-direction: column;
    gap: 1.143rem;
    padding: 1.714rem 0.929rem 1.143rem 1.714rem;
    overflow-y: auto;
    border-radius: 1.143rem;
    background-color: #0e222e;
    .header {
      display: flex;
      gap: 2.286rem;
      align-items: center;
      font-weight: 700;
      letter-spacing: .01rem;
      color: #dfdfdf;
      margin-bottom: 5px;
      .label {
        font-size: 1.714rem;
      }
      .divider {
        flex-grow: 1;
        //flex: 1 0 50%;
        border-bottom: 1px solid #233645;
      }
      &.large .label {
        font-size: 1.714rem;
      }
    }
    .reference-code-list {
      display: flex;
      gap: 0.857rem;
      flex-wrap: wrap;
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 30%;
        padding: 0.571rem;
        cursor: pointer;
        border-radius: 0.857rem;
        outline: 1px solid #1C7292;
        background-color: #112939;
        .menu-item-left {
          display: flex;
          gap: 0.571rem;
          align-items: center;
          width: 45%;
          margin-right: 5px;
          .menu-name {
            display: flex;
            align-items: center;
            height: min(2.857rem,2.083vw);
            color: #dfdfdf;
            font-family: Manrope,sans-serif;
            font-size: 1.143rem;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: .01rem;
          }
        }
      }
    }
    .menu-wrapper {
      display: flex;
      gap: 1.071rem;
      justify-content: center;
      height: 100%;
      padding: 0.286rem;
      overflow-y: auto;
    }
    .menu-list {
      display: flex;
      flex-direction: column;
      gap: 0.857rem;
      width: min(29.286rem,21.354vw);
      height: -moz-fit-content;
      height: fit-content;
      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.571rem;
        cursor: pointer;
        border-radius: 0.857rem;
        outline: 1px solid #1C7292;
        background-color: #112939;
        .menu-item-left {
          display: flex;
          gap: 0.571rem;
          align-items: center;
          .menu-name {
            display: flex;
            align-items: center;
            height: min(2.857rem,2.083vw);
            color: #dfdfdf;
            font-family: Manrope,sans-serif;
            font-size: 1.143rem;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: .01rem;
          }
        }
      }
    }
  }
  .delete-user-dialog {
    .el-dialog {
      .el-dialog__header {
        display: none;
      }
      .delete-user-box {
        height: 50vh;
        display: flex;
        flex-direction: column;
        gap: 3.429rem;
        align-items: center;
        justify-content: center;
        color: #fff;
        .delete-user-title {
          display: flex;
          flex-direction: column;
          gap: 1.857rem;
          align-items: center;
          font-family: Inter,sans-serif;
          font-size: 1.714rem;
          font-weight: 700;
          letter-spacing: .01rem;
        }
        .delete-btn-box {
          display: grid;
          width: 80%;
          height: 3.857rem;
          grid-auto-columns: minmax(0,1fr);
          grid-auto-flow: column;
          gap: 0.714rem;
          font-family: Manrope,sans-serif;
          > div {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border-radius: 0.571rem;
            height: 100%;
            border: 1px solid #2F677E;
            &:hover {
              background-color: #94f4ff52;
            }
          }
        }
      }
    }
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .setting-left {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    overflow: hidden;
    color: #628196;
    font-size: .857rem;
    font-weight: 700;
    .setting-left-header {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 0.571rem;
      .setting-left-search {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Manrope,sans-serif;
        white-space: nowrap;
        letter-spacing: .01em;
        gap: 1.143rem;
        padding: 0 1.714rem 0 0.571rem;
        border-radius: 0.571rem;
        background: #122A3A;
        .el-input__inner {
          border: none;
          &:focus {
            border: none;
          }
        }
      }
    }

    .setting-left-body {
      display: flex;
      flex-direction: column;
      gap: 0.143rem;
      font-weight: 700;
      .cabinet-id {
        border-radius: 1.286rem;
        background: #2B4353;
        background-clip: content-box;
        color: #97bad1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        overflow: hidden;
      }
      .cabinet-name {
        cursor: pointer;
        border-radius: 0.857rem;
        &:hover {
          background-color: #17c5ff1f;
          background-clip: content-box;
          color: #67cae8;
        }
      }
      .totalProfiles {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.286rem;
        overflow: hidden;
        border-radius: 0.857rem;
        background-color: #0e222e;
        background-clip: content-box;
        cursor: pointer;
        border-radius: 0.857rem;
        &:hover {
          background-color: #17c5ff1f;
          background-clip: content-box;
          color: #67cae8;
        }
      }
    }
  }
  .setting-right {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
    .setting-right-header {
      display: grid;
      grid-template-columns: 54fr 46fr;
      align-items: center;
      width: calc(100% - 0.42rem);

      .setting-right-search {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: Manrope,sans-serif;
        white-space: nowrap;
        letter-spacing: .01em;
        gap: 1.143rem;
        padding: 0 1.714rem 0 0.571rem;
        border-radius: 0.571rem;
        background: #122A3A;
        .el-input__inner {
          border: none;
          &:focus {
            border: none;
          }
        }
      }
    }

    .user-cabinets-list {
      display: flex;
      gap: 0.286rem;
      align-items: center;
      padding: 0.286rem;
      border-radius: 0.857rem;
      background: #0E222E;
      height: 36px;
      .user-cabinets-item {
        position: relative;
        display: flex;
        width: 60px;
        .el-input__inner {
          padding-left: 10px;
          padding-right: 10px;
        }
        .el-select__caret {
          background-color: transparent;
        }
      }
    }
  }
  .cabinet-dialog {
    display: flex;
    flex-direction: column;
    gap: 1.714rem;
    width: 100%;
    height: 100%;
    .cabinet-form {
      display: flex;
      flex-direction: column;
      gap: min(calc(24 / 14 * 1rem),calc(24 / (900 / 100) * 1vh));
      align-items: flex-start;
      width: 100%;
      padding: 1.714rem;
      border-radius: 1rem;
      background: #0E222E;
      font-family: Inter,sans-serif;
      .cabinet-form-header {
        width: 100%;
        display: flex;
        align-items: center;
        .cabinet-form-label {
          color: #ffffff;
          font-size: 1.429rem;
          font-weight: 700;
        }
        .required {
          margin-left: auto;
          color: #fc9ab6;
          font-size: .857rem;
          line-height: 100%;
        }
      }
      .cabinet-form-input {
        width: 100%;
        .el-input__inner {
          width: 100%;
          border: none;
          border-radius: 0.286rem;
          background: #233645;
          color: #ebebeb;
          font-size: .857rem;
          font-weight: 600;
          height: min(calc(48 / 14 * 1rem),calc(48 / (900 / 100) * 1vh));
          text-indent: 1.143rem;
        }
      }
    }
    .cabinet-bottom {
      display: flex;
      gap: 1.214rem;
      .el-button {
        flex: 1
      }
    }
  }
}
</style>
